<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible.sync="visible"
    width="60%"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="ID" prop="id" v-if="dataForm.id">
        <el-input v-model="dataForm.id" placeholder="ID" disabled></el-input>
      </el-form-item>
      <div class="flex">
        <el-form-item label="编号" prop="code" style="flex: 1">
          <el-input v-model="dataForm.code" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" style="flex: 1">
          <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="性别" prop="sex" style="flex: 1">
          <el-radio v-model="dataForm.sex" :label="1">男</el-radio>
          <el-radio v-model="dataForm.sex" :label="0">女</el-radio>
          <!-- <el-input v-model="dataForm.sex" placeholder="性别"></el-input> -->
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday" style="flex: 1">
          <el-date-picker
            v-model="dataForm.birthday"
            type="date"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input v-model="dataForm.birthday" placeholder="出生年月"></el-input> -->
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="民族" prop="race" style="flex: 1">
          <el-input v-model="dataForm.race" placeholder="民族"></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="nativeplace" style="flex: 1">
          <el-input
            v-model="dataForm.nativeplace"
            placeholder="籍贯"
          ></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="出生地" prop="birthplace" style="flex: 1">
          <el-input
            v-model="dataForm.birthplace"
            placeholder="出生地"
          ></el-input>
        </el-form-item>
        <el-form-item label="入党时间" prop="partydate" style="flex: 1">
          <el-date-picker
            v-model="dataForm.partydate"
            type="date"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input
          v-model="dataForm.partydate"
          placeholder="入党时间"
        ></el-input> -->
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="参加工作时间" prop="workdate" style="flex: 1">
          <el-date-picker
            v-model="dataForm.workdate"
            type="date"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input
          v-model="dataForm.workdate"
          placeholder="参加工作时间"
        ></el-input> -->
        </el-form-item>
        <el-form-item
          label="进报社工作时间"
          prop="entrancedate"
          style="flex: 1"
        >
          <el-date-picker
            v-model="dataForm.entrancedate"
            type="date"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input
          v-model="dataForm.entrancedate"
          placeholder="进报社工作时间"
        ></el-input> -->
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="部门(单位)" prop="department" style="flex: 1">
          <el-input
            v-model="dataForm.department"
            placeholder="部门(单位)"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="status" style="flex: 1">
          <el-input v-model="dataForm.status" placeholder="身份"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="照片" prop="photo" style="flex: 1">
          <div class="img" v-if="!dataForm.photo">
            <span style="position: relative; top: 40px">上传图片</span>
            <input
              type="file"
              id="id"
              class="img-input"
              @change="shangc($event)"
              accept="image/jpg,image/jpeg,image/png"
            />
          </div>
          <div v-else>
            <img :src="dataForm.photo" width="60" height="40" />
            <i
              class="el-icon-close"
              @click="delImg"
              style="position: relative; top: -30px; cursor: pointer"
            ></i>
          </div>
        </el-form-item>

        <el-form-item label="聘任情况" prop="position" style="flex: 1">
          <el-radio v-model="dataForm.position" :label="0">集团正式</el-radio>
          <el-radio v-model="dataForm.position" :label="1"
            >二级单位招聘</el-radio
          >
          <!-- <el-input
          v-model="dataForm.position"
          placeholder="聘任情况（0-集团正式，1-二级单位招聘）"
        ></el-input> -->
        </el-form-item>
      </div>

      <el-form-item label="简历" >
       
        <div class="box">
          <div>学习阶段 <i class="el-icon-plus cur" @click="addlearn"></i></div>
          <div class="flex"  v-for="(item,index) in resumeObj.learningList" :key="index">
            <div class="mr-1">起始日期:<el-input v-model="item.a" style="width:200px"></el-input></div>
            <div class="mr-1">终止日期:<el-input v-model="item.b" style="width:200px"></el-input></div>
            <div class="mr-1">院校:<el-input v-model="item.c" style="width:200px"></el-input></div>
             <div class="mr-1"> <i class="el-icon-delete cur" @click="dellearn(index)"></i></div>
          </div>
          <div>工作阶段 <i class="el-icon-plus cur"  @click="addwork"></i></div>
          <div class="flex" v-for="(item,index) in resumeObj.workList" :key="index">
            <div class="mr-1">起始日期:<el-input v-model="item.d" style="width:200px"></el-input></div>
            <div class="mr-1">终止日期:<el-input v-model="item.e" style="width:200px"></el-input></div>
            <div class="mr-1">单位:<el-input v-model="item.f" style="width:200px"></el-input></div>
             <div class="mr-1"> <i class="el-icon-delete cur"  @click="delwork(index)"></i></div>
          </div>
        </div>
      </el-form-item>
      <!-- <el-form-item label="审核状态" prop="verified">
         <el-radio v-model="dataForm.verified" :label="0">未审核</el-radio>
      <el-radio v-model="dataForm.verified" :label="1">已审核</el-radio>
      </el-form-item> -->
      <el-form-item label="奖惩情况" prop="rewards">
        <el-input v-model="dataForm.rewards" placeholder="奖惩情况"></el-input>
      </el-form-item>
      <el-form-item label="年度考核结果" prop="assessments">
        <el-input
          v-model="dataForm.assessments"
          placeholder="年度考核结果"
        ></el-input>
      </el-form-item>
      <el-form-item label="任免理由" prop="reason">
        <el-input v-model="dataForm.reason" placeholder="任免理由"></el-input>
      </el-form-item>
      <el-form-item label="家庭主要成员及重要社会关系">
        <div class="box">
           <div>添加 <i class="el-icon-plus cur"  @click="addfamily"></i></div>
         <div class="flex" v-for="(item,index) in familyList" :key="index">
            <div class="mr-1">称谓:<el-input v-model="item.a" style="width:80px"></el-input></div>
            <div class="mr-1">姓名:<el-input v-model="item.b" style="width:80px"></el-input></div>
            <div class="mr-1">年龄:<el-input v-model="item.c" style="width:80px"></el-input></div>
             <div class="mr-1">政治面貌:<el-input v-model="item.d" style="width:100px"></el-input></div>
              <div class="mr-1">工作单位及职务:<el-input v-model="item.e" style="width:150px"></el-input></div>
             <div class="mr-1"> <i class="el-icon-delete cur"  @click="delfamily(index)"></i></div>
          </div>
        </div>
         
        <!-- <el-input
          v-model="dataForm.connections"
          placeholder="家庭主要成员及重要社会关系"
        ></el-input> -->
      </el-form-item>
      <!-- <el-form-item label="createBy" prop="createBy" v-if="dataForm.id">
        <el-input
          v-model="dataForm.createBy"
          placeholder="createBy"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="createTime" prop="createTime" v-if="dataForm.id">
        <el-input
          v-model="dataForm.createTime"
          placeholder="createTime"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="updateBy" prop="updateBy" v-if="dataForm.id">
        <el-input
          v-model="dataForm.updateBy"
          placeholder="updateBy"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="updateTime" prop="updateTime" v-if="dataForm.id">
        <el-input
          v-model="dataForm.updateTime"
          placeholder="updateTime"
          disabled
        ></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/staff";

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      dataForm: {
        id: 0,
        code: "",

        name: "",

        sex: "",

        birthday: "",

        race: "",

        nativeplace: "",

        birthplace: "",

        partydate: "",

        workdate: "",

        entrancedate: "",

        department: "",

        status: "",

        photo: "",

        resume: "",

        position: "",

        verified: "",

        rewards: "",

        assessments: "",

        reason: "",

        connections: "",

        createBy: "",

        createTime: "",

        updateBy: "",

        updateTime: "",
      },
      dataRule: {
        code: [{ required: true, message: "编号不能为空", trigger: "blur" }],

        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],

        sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],

        birthday: [
          { required: true, message: "出生年月不能为空", trigger: "blur" },
        ],

        race: [{ required: true, message: "民族不能为空", trigger: "blur" }],

        nativeplace: [
          { required: true, message: "籍贯不能为空", trigger: "blur" },
        ],

        birthplace: [
          { required: true, message: "出生地不能为空", trigger: "blur" },
        ],

        partydate: [
          { required: true, message: "入党时间不能为空", trigger: "blur" },
        ],

        workdate: [
          { required: true, message: "参加工作时间不能为空", trigger: "blur" },
        ],

        entrancedate: [
          {
            required: true,
            message: "进报社工作时间不能为空",
            trigger: "blur",
          },
        ],

        department: [
          { required: true, message: "部门(单位)不能为空", trigger: "blur" },
        ],

        status: [{ required: true, message: "身份不能为空", trigger: "blur" }],

        photo: [{ required: true, message: "照片不能为空", trigger: "blur" }],

        resume: [{ required: true, message: "简历不能为空", trigger: "blur" }],

        position: [
          {
            required: true,
            message: "聘任情况（0-集团正式，1-二级单位招聘）不能为空",
            trigger: "blur",
          },
        ],

        verified: [
          {
            required: true,
            message: "审核状态（0-未审核，1-已审核）不能为空",
            trigger: "blur",
          },
        ],

        rewards: [
          { required: true, message: "奖惩情况不能为空", trigger: "blur" },
        ],

        assessments: [
          { required: true, message: "年度考核结果不能为空", trigger: "blur" },
        ],

        reason: [
          { required: true, message: "任免理由不能为空", trigger: "blur" },
        ],

        connections: [
          {
            required: true,
            message: "家庭主要成员及重要社会关系不能为空",
            trigger: "blur",
          },
        ],
      },
      resumeKey:{
          a:null,
          b:null,
          c:null
      },
      resumeObj:{
        learningList:[

        ],
        workList:[

        ]


      },
      familyList:[]
       


    };
  },
  methods: {
    addlearn(){
      let obj1={
          a:null,
          b:null,
          c:null
      }
       this.resumeObj.learningList.push(obj1)
    },
    addwork(){
       let obj2={
          d:null,
          e:null,
          f:null
      }
       this.resumeObj.workList.push(obj2)
      
    },
    dellearn(index) {

       this.resumeObj.learningList.splice(index, 1)
    },
    delwork(index) {

       this.resumeObj.workList.splice(index, 1)
    },

    addfamily(){
       let obj3={
         a:null,
          b:null,
          c:null,
          d:null,
          e:null,
          
      }
       this.familyList.push(obj3)
      
    },
    delfamily(index) {

       this.familyList.splice(index, 1)
    },
    // 图片删除
    delImg() {
      this.$set(this.dataForm, "photo", null);
      //  this.form.nationalFlag
    },
    shangc(e) {
      let files = document.getElementById("id").files[0];
      // console.log(files)

      let name = document.getElementById("id").files[0].name;
      let arr = name.split(".");
      // console.log(files.size,'files.sizefiles.sizefiles.size')
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 120000) {
          this.$message.error("图片大小不能大于120k！");

          return false;
        } else if (fileSize <= 0) {
          this.$message.error("图片大小不能为0k！");

          return false;
        }
      } else {
        return false;
      }
      //转码base64 dataForm.photo
      let reader = new FileReader();
      let imgFile;
      reader.readAsDataURL(files);
      reader.onload = (e) => {
        imgFile = e.target.result;
        this.$set(this.dataForm, "photo", imgFile);
        // this.form.nationalFlag=imgFile
        // console.log(imgFile)
      };
    },

    init(id) {
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (id) {
          getObj(id).then((response) => {
            this.dataForm = response.data.data;
             this.resumeObj=this.dataForm.resume? JSON.parse(this.dataForm.resume):{}
             this.familyList=this.dataForm.connections? JSON.parse(this.dataForm.connections):[]
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            this.dataForm.resume=JSON.stringify(this.resumeObj)
            this.dataForm.connections=JSON.stringify(this.familyList)
            putObj(this.dataForm)
              .then((data) => {
                this.$notify.success("修改成功");
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            this.dataForm.verified = 0;
            this.dataForm.resume=JSON.stringify(this.resumeObj)
            this.dataForm.connections=JSON.stringify(this.familyList)
            addObj(this.dataForm)
              .then((data) => {
                this.$notify.success("添加成功");
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$refs["dataForm"].resetFields();
    },
  },
};
</script>
<style>
.flex {
  display: flex;
  flex-direction: row;
}
.el-form-item {
  display: flex;
  flex-direction: row;
}
.el-form-item__content {
  width: 100%;
  margin-left: 20px !important;
}
.el-form-item__label {
  width: 180px !important;
}
.img {
  /* D:\project two\resume-management-ui\public\img */
  width: 100px;
  height: 80px;
  background-image: url("../../../../public/img/shangchuan.png");
  background-repeat: no-repeat;
  background-position: center 16px;
  background-size: 30%;
  border: 1px dashed #4084e5;
  color: #4084e5;
  text-align: center;
}
.img-input {
  position: relative;
  width: 100px;
  height: 80px;
  top: -60px;
  opacity: 0;
  cursor: pointer;
}
.mr-1{
  margin-right: 10px;
}
.box{
  width: 100%;
  padding: 20px 30px 30px 20px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;


}
.cur{
  cursor: pointer;
}
</style>